<template>
  <div>
    <!-- 分类 -->
    <el-card>
      <CategorySelector :disabled="isDisabled" />
    </el-card>
    <!-- 展示  -->
    <el-card style="margin-top: 10px;">
      <SpuList @changeTab="changeTab" @changeSpu="changeSpu" v-if="currentShow == Tab.SPU_LIST" />
      <SpuForm @changeTab="changeTab" :currentSpu="currentSpu" v-if="currentShow == Tab.ADD_SPU" />
      <SkuForm @changeTab="changeTab" :currentSpu="currentSpu" v-if="currentShow == Tab.ADD_SKU" />
    </el-card>
  </div>
</template>

<script lang="ts">
import { onMounted, ref, reactive, watch } from 'vue'
import { Plus, Edit, InfoFilled, Delete } from '@element-plus/icons-vue'
import type { spuItemModel } from '@/api/product/model/spu'
export default {
  name: 'spu',
}
</script>

<script lang="ts" setup>
import { useCategoryStore } from '@/stores/category'
import SpuList from './components/SpuList.vue'
import SpuForm from './components/SpuForm.vue'
import SkuForm from './components/SkuForm.vue'
enum Tab {
  SPU_LIST = 1,
  ADD_SPU = 2,
  ADD_SKU = 3
}
const currentShow = ref(Tab.SPU_LIST)

const changeTab = (tab: number) => {
  currentShow.value = tab
}

// 设置当前 spu
const currentSpu = ref<spuItemModel>()

const changeSpu = (spu: spuItemModel) => {
  // 修改传递给spuForm 组件的prop
  currentSpu.value = spu
}

// 控制一二三级分类是否禁用
const isDisabled = ref(false)
watch(currentShow, (currentShow) => {
  currentShow != Tab.SPU_LIST && (isDisabled.value = true)
})

</script>
<style lang="scss" scoped>

</style>